<template>
  <div class="app-main" id="micro">
    <div class="left" :style="styles" @click="hideMapTool('query')">
      <query @querystyle="styleChange" @openCollect="openCollect" :hideTableObjTree="hideTableObjTree"></query>
    </div>
    <div class="right">
      <div class="map-tool">
        <map-tool :image="toolImageParams" :toolData="toolData" :hideMapToolItem="hideMapToolItem"></map-tool>
      </div>
      <!-- 盛放地图的容器 -->
      <div class="content" @click="hideMapTool('map')">
        <layer></layer>
      </div>

      <!-- 展示汇总分析组件 -->
      <!-- <div v-if="showCollect">
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Query from "./query/index";//左边查询面板
import MapTool from "@/components/MapTool/mapTool"; // 地图工具栏组件
import Layer from "./map/index"; // 地图组件
import toolData from "./map/data/map.tool.data.js";
import axios from 'axios';
import regionUrl from "static/config/region.js";

export default {
  name: "micro",
  components: {
    Query,
    MapTool,
    Layer
  },
  data() {
    return {
      hideTableObjTree:false,
      toolImageParams: {
        el: "map", // 所需要截图的元素id
        insertEl: "micro" // 插入截图的元素id
      }, // 截图传递的参数
      styles: {}, // query组件样式
      toolData: {},
      showCollect:false, //汇总分析展示
      hideMapToolItem:false, //隐藏MapTool所有面板
      hideMapControl:false  //隐藏地图控制面板
    };
  },
  created() {},
  mounted() {
    let that = this;
    that.toolData = toolData;
    //获取权限方法
    var userInfo = localStorage.getExpire("userInfo");
    var token_type = localStorage.getExpire("token_type");
    var access_token = localStorage.getExpire("access_token");
    if(userInfo==null||token_type==null||access_token==null){
      that.$message({
        message: "你还没有登录",
        type: 'error'
      });
      setTimeout(function () {
        top.location.href=loginPageUrl;
      },2500)
    }else {
      // 获取用户id
      const userid = (JSON.parse(userInfo)).sysUser.userId;
      // 根据用户id获取用户区划信息
      axios.get(config.loginUrl.userRegion + "?user_id=" + userid, {
        headers:{
          'Authorization': token_type + " " + access_token
        }
      }).then(response => {
        if(response.status === 200){
          const data = response.data.data;
          const regionData = data[0];
          // 查询区划对应详细信息
          let param = {
            regionCode: regionData.regionCode,
            rcid: regionData.rcid
          };
          axios.get(regionUrl.class.getRegionSelf, {
            params: param,
            headers: {
              'Authorization': token_type + " " + access_token
            }
          }).then(response => {
            if (response.status === 200) {
              let regionSelf = response.data.data;
              if(regionSelf === null){
                console.log("未设置用户区划");
                return;
              }else{
                let rgData = {
                  code: regionSelf.code,
                  id: regionSelf.id,
                  memo: regionSelf.memo,
                  name: regionSelf.name,
                  originCode: regionSelf.originCode,
                  originName: regionSelf.originCode,
                  parCode: regionSelf.parCode,
                  parCodeName: "",
                  rcid: regionSelf.rcid,
                  regionCodeType: regionSelf.regionCodeType,
                  ruralProperty: regionSelf.ruralProperty,
                  shortName: regionSelf.shortName,
                  urcCode: regionSelf.urcCode,
                  version: regionSelf.version,
                  villageProperty: regionSelf.villageProperty,
                  x: regionSelf.x,
                  y: regionSelf.y
                };
                EventBus.$emit("initRegion", [rgData]);
              }
            }
          }).catch(error => {
            console.log(error);
          });
        }
      }).catch(error => {
        console.log(error);
      });
    }
  },
  computed: {
      ...mapState({
        showmacroqueryall: state => state.micro.showmacroqueryall,
        showMapControl: state => state.micro.showMapControl,
        showMapTableLayer: state => state.micro.showMapTableLayer,
        showEchartsLayer: state => state.micro.showEchartsLayer
      })
    },
  methods: {
    ...mapMutations(["changeShowMapControl","changeShowEchartsLayer","changeShowMapTableLayer","changeshowmacroqueryall"]),
    //点击地图隐藏面板
    hideMapTool(type){
      this.hideMapToolItem = !this.hideMapToolItem;
      this.hideTableObjTree = !this.hideTableObjTree;
      this.$store.commit("changeShowMapControl",false)
      if(type=="map"){
        this.$store.commit("changeshowmacroqueryall",false)
      }
    }, 
    styleChange(style) {
      this.styles = style;
    },
    //打开汇总界面
    openCollect() {
      this.showCollect = true;
    },
    closeMain(type){
      if(type == "echarts"){
        this.$store.commit("changeShowEchartsLayer", false);
      }else if(type == "map"){
        this.$store.commit("changeShowMapControl",false)
      }else{
        this.$store.commit("changeShowMapTableLayer", false);
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .spatialquery {
    overflow: hidden;
  }
  .app-main {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .left {
      position: absolute;
      min-height: 50px;
      max-height: 100%;
      z-index: 1300;
      height: 100%;
    }
    .right {
      height: 100%;
      width: 100%;
      background: #ccc;
      .map-tool {
        position: absolute;
        top: 17px;
        right: 23px;
        z-index: 1100;
        cursor: pointer;
      }
      .content {
        width: 100%;
        height: 100%;
      }
      .enlarge-icon {
        position: absolute;
        top: 20px;
        right: 40px;
        cursor: pointer;
      }
    }
  }
</style>
<style>
  #dialog-scene .el-dialog__body {
    padding: 0px 5px 5px 5px !important;
  }
</style>
